Related GitHub Issue

Picked up work from #2806 since it has been marked as stale.

Description

I feel like the current history UI is a bit outdated. This PR makes it look and feel more consistent with the rest.

Here's what's been done:

• Moved all style props into tailwindcss
• Refactored some components so they are more consistent with one another
• Adjusted some stylings to be more consistent
• Make compact and full variant of TaskItem more consistent
• Moved information into one place so it's easier to look at all of them
• Changed the filter UI to use dropdown instead of the messy radio and checkbox
• Updated / added tests for the history components

Test Procedure

Open the history menu, it should show the new UI. I didn't change much apart from the TaskItem component

Type of Change

• 🐛 Bug Fix: Non-breaking change that fixes an issue.
• ✨ New Feature: Non-breaking change that adds functionality.
• 💥 Breaking Change: Fix or feature that would cause existing functionality to not work as expected.
• ♻️ Refactor: Code change that neither fixes a bug nor adds a feature.
• 💅 Style: Changes that do not affect the meaning of the code (white-space, formatting, etc.).
• 📚 Documentation: Updates to documentation files.
• ⚙️ Build/CI: Changes to the build process or CI configuration.
• 🧹 Chore: Other changes that don't modify src or test files.

Pre-Submission Checklist

• Issue Linked: This PR is linked to an approved GitHub Issue (see "Related GitHub Issue" above).
• Scope: My changes are focused on the linked issue (one major feature/fix per PR).
• Self-Review: I have performed a thorough self-review of my code.
• Code Quality:
  • My code adheres to the project's style guidelines.
  • There are no new linting errors or warnings (npm run lint).
  • All debug code (e.g., console.log) has been removed.
• Testing:
  • New and/or updated tests have been added to cover my changes.
  • All tests pass locally (npm test).
  • The application builds successfully with my changes.
• Branch Hygiene: My branch is up-to-date (rebased) with the main branch.
• Documentation Impact: I have considered if my changes require documentation updates (see "Documentation Updates" section below).
• Changeset: A changeset has been created using npm run changeset if this PR includes user-facing changes or dependency updates.
• Contribution Guidelines: I have read and agree to the Contributor Guidelines.

Screenshots / Videos

These screenshots are side-by-side comparison with the old UI. (left is the new one, right is the old one)

Documentation Updates

This is only UI changes, no need for documentation update

Get in Touch

@elianiva